<style lang="less">
.article-list {
    .article-list-title {
        padding: 20px 0px;
    }

    .article-list-footer {
        margin-top: 15px;
    }
}
</style>
<template>
    <div class="article-list">
        <h3 class="article-list-title">用户列表</h3>
        <div class="article-list-wrap">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="序号" width="80">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.$index + 1 }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="账号" prop="account"></el-table-column>
                <el-table-column label="用户名" prop="username"></el-table-column>
                <el-table-column label="性别" width="80" prop="gender"></el-table-column>

                <el-table-column label="注册时间">
                    <template slot-scope="scope">
                        <div class="demo">
                            <span>{{ scope.row.createAt }}</span>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column align="right" width="180">
                    <template slot="header">
                        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="article-list-footer">
            <el-pagination @current-change="currentChangeFn" background layout="prev, pager, next" :page-size="5"
                :pager-count="7" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { itemsUser, deleteUser } from "../api/index"
import { Message } from 'element-ui'
export default {

    data() {
        return {
            tableData: [
            ],
            search: '',
            page_num: 1,// 第几页
            page_size: 5,//多少
            total: 0
        }
    },
    methods: {
        // 删除文章
        async deleteUserFn(id) {
            let token = localStorage.getItem("AUTO_TOKEN");
            if (token) {
                await deleteUser({ token, id })
                    .then(
                        resData => {
                            // 删除成功
                            //  console.log(resData)
                            if (resData.code == 200) {
                                Message({ type: "success", message: resData.msg })
                                this.itemsUserFn();
                            }
                            else {
                                Message({ type: "error", message: resData.msg })
                            }
                        }
                    )
            }
            else {
                Message({ type: "error", message: "您还没有登录" })
            }
        },

        // 获取用户列表
        async itemsUserFn() {
            let page_num = this.page_num
            let page_size = this.page_size
            await itemsUser({ page_num, page_size })
                .then(
                    resData => {
                        console.log(resData)
                        if (resData.code == 200) {
                            this.tableData = resData.data;
                            this.total = resData.total;
                        }
                    }
                )
        },
        // 编辑
        handleEdit(index, row) {
            console.log(index, row);
        },
        // 删除
        handleDelete(index, row) {
            console.log(index, row);
            // 询问一下管理员
            if (confirm("您确定要删除该用户吗")) {
                // 删除文章
                this.deleteUserFn(row.id);
            }
        },

        // 当前页
        currentChangeFn(index) {
            console.log("index:", index);
            this.page_num = index;
            this.itemsUserFn();
        }

    },
    created() {
        // 初始化
        this.itemsUserFn();
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                // console.log(newRoute);
                this.$store.commit("addTab", newRoute);
            }
        }
    }
}
</script>